<template>
	<view class="login-page-box">
		<image class="login-bg" src="@/static/login/login_bg.png"></image>
		<u-navbar title="课后延时教学平台" bgColor="transparent" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="login-form-box">
			<image class="form-bg" src="@/static/login/form_bg.png"></image>
			<view class="login-logo">
				<image src="@/static/login/login_logo.png" mode="aspectFill"></image>
			</view>
			<view class="login-form">
				<view class="login-item">
					<view class="login-label">账号</view>
					<u-input v-model="account" placeholder="请输入账号" :border="false"
						:customStyle="{ height: '88rpx',background: '#F7F7F7',borderRadius: '12rpx',boxSizing:'border-box'}"></u-input>
				</view>
				<view class="login-item">
					<view class="login-label">密码</view>
					<u-input v-model="password" type="password" placeholder="请输入密码" :border="false"
						:customStyle="{ height: '88rpx',background: '#F7F7F7',borderRadius: '12rpx',boxSizing:'border-box'}"></u-input>
				</view>
			</view>
			<view class="login-in-box">
				<view class="login-in" @click="userLogin">立即登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '', // 用户账号
				password: '', // 用户密码
			}
		},
		methods: {
			//当前登录按钮操作
			userLogin() {
				//验证登录账户
				if (!this.account) {
					return this.$Toast('请输入您的账号');
				}
				if (!this.password) {
					return this.$Toast('请输入您的密码');
				}
				//账号密码登录
				this.$Api.common.userLogin({
					account: this.account,
					password: this.password,
				}).then(res => {
					//提交用户信息到VueX
					this.$store.commit('LOGIN', {
						token: res.data.userinfo.token
					})
					this.$store.commit('UPDATE_USERINFO', res.data.userinfo)
					this.$Tips({
						title: '登陆成功'
					}, {
						tab: 1,
						url: '/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-page-box {
		min-height: 100vh;
		background: #f5f6fa;

		.login-bg {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}

		.login-form-box {
			position: relative;
			margin: 92rpx 28rpx 0;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 98rpx 32rpx;
			box-sizing: border-box;

			.form-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.login-logo {
				width: 304rpx;
				height: 186rpx;
				margin-bottom: 164rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.login-form {
				width: 100%;
				padding: 0 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.login-item {
					width: 100%;
					margin-bottom: 36rpx;

					.login-label {
						font-weight: bold;
						font-size: 34rpx;
						color: #000000;
						margin-bottom: 12rpx;
						line-height: 50rpx;
					}
				}
			}

			.login-in-box {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 70rpx;

				.login-in {
					width: 100%;
					font-size: 30rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 88rpx;
					background: #0095F8;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
					border-radius: 44rpx;
				}
			}
		}

	}
</style>